<template>
	<view class="goodsdet" :style="numbergoodsflag?'height:100%;overflow: hidden;':''">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'详情'"></Hearder>
		<!-- #endif -->
		<u-transition :show="show">
			<view v-if="JSON.stringify(detail) !='{}'">
				<u-transition :show="show">
					<view class="page-section-spacing">
						<swiper class="swiper"
							:autoplay="true" 
							interval="5000" 
							duration="1500"
							circular="true"
							@change="change">
							<swiper-item v-for="(item,index) in detail.image" :key="index">
								<image :src="item.file_path"></image>
							</swiper-item>
						</swiper>
						<view class="photonum">{{swiperCurrent+1}}/{{detail.image.length}}</view>
					</view>
				</u-transition>
				<view class="goods-bot">
					<view class="price" v-if="detail.product_types!=3">
						<text>￥{{detail.spec[0].goods_price}}</text>
						<text>￥{{detail.spec[0].line_price}}</text>
					</view>
					<view class="price" v-if="detail.product_types==3">
						<text>{{detail.spec[0].score_price}}积分</text>
					</view>
					<view class="title">{{detail.goods_name}}</view>
					<view class="flaging">
						<text>销量：{{detail.spec[0].goods_sales}}</text>
						<text>库存：{{detail.spec[0].stock_num}}</text>
					</view>
				</view>
				<view class="det-con">
					<view class="det_t">商品详情</view>
					<view class="det_m">
						<u-parse :previewImg="false" :content="detail.content"></u-parse>
					</view>
				</view>
				<view class="goods_btn" v-if="detail.product_types!=3">
					<view @click="toSwitch('/pages/shopcart/shopcart')">
						<image src="/static/images/875.png"></image>
						<text>购物车</text>
					</view>
					<view>
						<view @click="paymoney(1)">加入购物车</view>
						<view @click="paymoney(2)">立即购买</view>
					</view>
				</view>
				<view class="goods_btn" v-if="detail.product_types==3" @click="showbuy(3)">
					<view class="jifenbtn">立即兑换</view>
				</view>
				<u-popup mode="bottom" :show="numbergoodsflag" @close="closeshow">
					<view class="numbergoods_con">
						<view class="shopping_con">
							<u-transition :show="show">
								<image :src="detail.image[0].file_path"></image>
							</u-transition>
							<view>
								<view>{{detail.goods_name}}</view>
								<view>￥{{goods_price}}</view>
							</view>
						</view>
						<view class="skulx" v-if="specData!=null">
							<view class="choosecolor" v-for="(item,index1) in specData.spec_attr" :key="item.group_id">
								<view class="bigcolor">{{item.group_name}}</view>
								<view class="list clearfix">
									<view @click="modelTap(index1,index2,value.item_id)" :class="value.checked?'chooseevery':''"
										v-for="(value,index2) in item.spec_items" :key="value.item_id">
										{{value.spec_value}}
									</view>
								</view>
							</view>
						</view>
						<view class="paymethod">
							<view class="pay-num">购买数量</view>
							<view class="shuru">
								<u-number-box bg-color="#f8f8f8" :min="1" v-model="number" inputWidth="62" @change="valChange"></u-number-box>
							</view>
						</view>
						<view class="goods_btnss" @click="showbuy(1)" v-if="signnum==1">加入购物车</view>
						<view class="goods_btnss" @click="showbuy(2)" v-if="signnum==2">确认购买</view>
					</view>
				</u-popup>
			</view>
			<u-transition :show="show">
				<u-loading-icon v-if="loading"></u-loading-icon>
			</u-transition>
			<u-skeleton
				rows="6"
				:title="false"
				:loading="loading"
				:rowsHeight="['393', '100rpx', '100rpx', '500rpx']"
				:rowsWidth="['100%', '100%', '100%', '100%']"
				animate
			></u-skeleton>
		</u-transition>
		<shopro-login-modal :showLogin="showLogin" @loginhidden="loginhidden"></shopro-login-modal>
	</view>
</template>

<script>
	var timer;
	export default {
		data(){
			return{
				loading: true,
				swiperCurrent:0,
				numbergoodsflag:false,
				number:1,
				poster:'',
				show:true,
				showLogin:false,
				detail:{},
				specData:{},
				goods_sku_id:0,
				goods_price:0,
				goods_spec:[],
				choosemoren:'',
				signnum:1
			}
		},
		onLoad(options) {
			this.id = options.id || this.$route.query.id
			this.request('/goods/getDetails',{goods_id:this.id}).then(res => {
				if(res.data.code==1){
					this.detail = res.data.data.detail
					this.goods_price = res.data.data.detail.spec[0].goods_price
					this.specData = res.data.data.specData
					if(this.specData){
						this.initGoods(this.specData);
					}
					this.loading = false
				}	
			})
		},
		methods:{
			change(e) {
				this.swiperCurrent = e.detail.current;
			},
			closeshow(){
				this.numbergoodsflag = false
			},
			/*初始化商品详情数据*/
			initGoods(data) {
			// 商品价格/划线价/库存
				  if(data){
						data.spec_attr[0].spec_items[0].checked = true;
					}
					// 初始化商品多规格
					if(data.spec_attr.length>1){
						 data = this.initManySpecData(data);
					}else{
					  this.goods_sku_id=data.spec_list[0].spec_sku_id
					  this.goods_price=data.spec_list[0].form.goods_price
					}
				    return data;
			},
			// 多规格数据
			initManySpecData(data) {
				  for (var i=0;i<data.spec_attr.length;i++) {
					for (var j=0;j<data.spec_attr[i].spec_items.length;j++) {
					  if (data.spec_attr.length>1) {
				        data.spec_attr[i].spec_items[0].checked = true;
						this.goods_spec[i] = data.spec_attr[i].spec_items[0].item_id;
					  }
					}
				  }
				  this.updateSpecGoods();
				  
				  return data;
			},
			//切换规格
			modelTap(index1,index2) {		
				  let attrIdx = index1,
				  itemIdx = index2;
				  for (var i=0;i<this.specData.spec_attr.length;i++) {
					for (let j=0;j<this.specData.spec_attr[i].spec_items.length;j++) {
					  if (attrIdx == i) {
						this.specData.spec_attr[i].spec_items[j].checked = false;
						if (itemIdx == j) {
							this.specData.spec_attr[i].spec_items[j].checked = true;
						    this.goods_spec[i] = this.specData.spec_attr[i].spec_items[itemIdx].item_id;
							this.numbergoodsflag=false
							this.numbergoodsflag=true
						}
					  }
					}
			    }
				 // 更新商品规格信息
				this.updateSpecGoods();
			},
			//更新规格
			updateSpecGoods() {
				var that = this
				let spec_sku_id = this.goods_spec.join('_');
				this.detail.spec.map(function(value,index){
					if(value.spec_sku_id==spec_sku_id){
						that.goods_sales=value.goods_sales
					}
				})
				  // 查找skuItem
				  let spec_list = this.specData.spec_list,
					skuItem = spec_list.find((val) => {
					  return val.spec_sku_id == spec_sku_id;
					});
				  // 记录goods_sku_id
				  // 更新商品价格、划线价、库存
				  if (typeof skuItem === 'object') {
					  this.goods_sku_id=skuItem.spec_sku_id
					  this.goods_price=skuItem.form.goods_price
				  }
			},
			valChange(e) {
				this.number = e.value
			},
			paymoney(t){
				this.signnum = t
				this.numbergoodsflag = true
			},
			showbuy(t){
				if(t==1){
					//加入购物车
					this.request('/cart/add',{
						goods_id:this.id,
						goods_num:this.number,
						goods_sku_id:this.goods_sku_id
					}).then(res => {
						if(res.data.code==-500){
							this.showLogin=true
							this.numbergoodsflag=false
						}else if(res.data.code==1){
							this.$tip(res.data.msg)
							setTimeout(()=>{
								uni.switchTab({
									url:'/pages/shopcart/shopcart'
								})
							},500)
						}else{
							this.$tip(res.data.msg)
						}
					})
				}else if(t==2){
					//立即购买
					uni.navigateTo({
						url:'/pages/classify/submit?type=1&id='+this.id+'&goods_num='+this.number+'&goods_sku_id='+this.goods_sku_id
					})
				}else if(t==3){
					// 积分购买
					uni.navigateTo({
						url:'/pages/classify/submit?type=4&id='+this.id+'&goods_num='+this.number+'&goods_sku_id='+this.goods_sku_id
					})
				}
			},
			loginhidden(data){
				this.showLogin=data
			},
			toSwitch(route){
				uni.switchTab({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.goodsdet{
		.page-section-spacing{
			position: relative;
			height: 750rpx;
			image{
				width: 100%;
				height: 750rpx;
			}
			swiper{
				height: 100% !important;
			}
			.photonum{
				position: absolute;
				right: 3%;
				bottom: 20rpx;
				width: 90rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: rgba(0,0,0,.65);
				color:#fff;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
		.goods-bot{
			padding: 0 3%;
			border-bottom: 20rpx solid $uni-background-color;
			.price{
				padding: 26rpx 0 20rpx;
				text{
					&:first-of-type{
						font-size: 40rpx;
						font-weight: 800;
						color: #FC281A;
					}
					&:nth-of-type(2){
						position: relative;
						top: -4rpx;
						font-size: 26rpx;
						color: #999;
						text-decoration: line-through;
						margin-left: 20rpx;
					}
				}
			}
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:2;
				/*! autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */
				font-size: 36rpx;
			}
			.flaging{
				display: flex;
				padding: 26rpx 0;
				text{
					color: #999;
					font-size: 24rpx;
					margin-right: 102rpx;
				}				
			}
		}
		.det-con{
			padding-bottom: 120rpx;
			margin: 0 3%;
			.det_t{
				margin:30rpx 0;
				font-weight: 800;
			}
		}
		.goods_btn{
			height: 97rpx;
			width: 100%;
			padding-right: 3%;
			text-align: center;
			position: fixed;
			bottom: 0;
			z-index: 99;
			display: flex;
			justify-content: space-between;
			background: #fff;
			box-shadow: 0 -1rpx 4rpx 0 rgba(193,193,194,0.1600);
			&>view:nth-of-type(1){
				position: relative;
				margin: 0 30rpx;
				text-align: center;
				image{
					width: 44rpx;
					height: 44rpx;
					margin-top: 10rpx;
				}
				text{
					display: block;
					font-size: 22rpx;
					text-align: center;
					margin-top: 6rpx;
				}
			}
			&>view:nth-of-type(2){
				margin: auto 0;
				display: flex;
				view{
					width: 300rpx;
					height: 97rpx;
					text-align: center;
					color: #fff;
					line-height: 97rpx;
					background: #FFBB36;
				}
				view:nth-of-type(2){
					background: #E40322;
				}
			}
			.jifenbtn{
				margin: 8rpx 4% !important;
				width: 92%;
				height: 80rpx;
				background: $uni-item-color;
				border-radius: 80rpx;
				color: #fff;
				line-height: 80rpx;
			}
		}
		.numbergoods_con {
			background: #fff;
			padding-bottom: 20rpx;
			max-height: 800rpx;
			overflow-y: auto;
			.shopping_con {
				display: flex;
				margin: 0 4%;
				border-bottom: 2rpx solid #F8F8F8;
				padding: 32rpx 0 30rpx;
				image {
					width: 170rpx;
					height: 170rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100% - 170rpx);
					view {
						&:first-of-type{
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp:2;
							/*! autoprefixer: off */
							-webkit-box-orient: vertical;
							/* autoprefixer: on */
							font-size: 26rpx;
							line-height: 39rpx;
						}
						&:last-of-type{
							color: #FD281A;
							font-weight: 800;
						}
					}
				}
			}
			.skulx{
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F8F8F8;
			}
			.choosecolor {
				margin: 0 3%;
				.bigcolor {
					margin-top: 30rpx;
					font-size: 28rpx;
				}
				.list {
					margin-right: -20rpx;
					>view {
						font-size: 26rpx;
						float: left;
						padding: 0 22rpx;
						min-width: 76rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						margin: 20rpx 20rpx 0 0;
						background: $uni-background-color;
						border-radius: 4rpx;
						border: 2rpx solid $uni-background-color;
					}
					.chooseevery {
						background: #FFF3F5;
						border: 2rpx solid $uni-text-color;
						color: $uni-text-color;
					}
					.delshow{
						position: relative;
						color: #999;
						text-decoration: line-through;
						pointer-events: none;
					}
				}
			}
			.paymethod {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #F8F8F8;
				margin: 0 4%;
				padding: 24rpx 0;
				.pay-num{
					font-size: 28rpx;
				}
			}
			.goods_btnss {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: $uni-item-color;
				border-radius: 80rpx;
				color: #fff;
				font-weight: 800;
				margin: 50rpx 4% 0;
			}
		}
	}
</style>